<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-card style="margin: 10px">
          <el-descriptions title="设备信息" border :column="1">
            <template slot="extra">
              <div class="devInfoBody">
                <div>
                  <i v-for="item in sizeIcon" class="el-icon-caret-right initColor"></i>
                </div>
              </div>
            </template>
            <el-descriptions-item label="机器编号" label-class-name="my-label">
              {{ device.devNum }}
            </el-descriptions-item>
            <el-descriptions-item label="设备sn" label-class-name="my-label">
              {{ device.devSn }}
            </el-descriptions-item>
            <el-descriptions-item label="转速(PRM)" label-class-name="my-label">
              {{ speed }}
            </el-descriptions-item>
            <el-descriptions-item label="位置" label-class-name="my-label">
              {{ device.location }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card style="margin: 10px">
          <el-descriptions title="班组计数" border :column="1">
            <el-descriptions-item v-for="(item,index) in banTypes" :label="item.name+isNow(index)"
                                  label-class-name="my-label">
              {{ item.val }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="margin: 10px">
          <el-descriptions title="生产信息" border :column="1">
            <el-descriptions-item label="挡车工" label-class-name="my-label">
              {{ device.empName }}
            </el-descriptions-item>
            <el-descriptions-item label="上班时间" label-class-name="my-label">
              {{ parseUpTime(device.empInfo) }}
            </el-descriptions-item>
            <el-descriptions-item label="布种类型" label-class-name="my-label">
              {{ device.clType }}
            </el-descriptions-item>
            <el-descriptions-item label="布种名称" label-class-name="my-label">
              {{ device.clName }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card style="margin: 10px">
          <el-descriptions title="纱长" border :column="1">
            <el-descriptions-item v-for="(item,index) in cloths" :label="item.name" label-class-name="cloth-label">
              {{ item.val }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card style="margin: 0 10px">
          <el-descriptions title="其他参数" border :column="3">
            <el-descriptions-item v-for="(item,index) in others" :label="item.name" label-class-name="my-label">
              {{ item.val }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card style="margin: 10px">
          <div style="display:flex;flex-wrap: wrap;">
            <div class="bottomContext" :style="parseBackground(item.index)" v-for="(item,index) in register">
              {{ item.name }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {getDetail} from '@/api/device/device'
import _  from 'lodash' ;
import Big from 'big.js';

export default {
  mounted() {
    const params = this.$route.params
    if (params) {
      this.deviceId = params.id
      getDetail({deviceId:params.id}).then(res => {
        console.log(res)
        this.device = res
        // this.move(res.status.substring(4, 1), res.isOnline)
        this.parseStatus(res.status)
      })
    }
    this.ele = document.getElementsByClassName("initColor");

  },

  destroyed() {
    clearInterval(this.createIcon)
  },

  data() {
    return {
      runText: '',
      deviceId: null,
      device: {},
      number: 0,
      createIcon: null,
      single: 1,
      greenIcon: 0,
      sizeIcon: 6,
      dataAry: [],
      speed: null,
      nowBan: 0,
      register: [
        {name: '上断纱', index: 0},
        {name: '下断纱', index: 1},
        {name: '探针', index: 2},
        {name: '破布', index: 3},
        {name: '缺油', index: 4},
        {name: '缺气', index: 5},
        {name: '安全门', index: 6},
        {name: '变频', index: 7},
        {name: '保险丝', index: 8},
        {name: '强迫', index: 10},
        {name: '清车', index: 11},
        {name: '风扇', index: 12},
        {name: '照布', index: 13},
        {name: '照明', index: 14},
        {name: '马达', index: 15},
        {name: '油泵', index: 16},
        {name: '点动', index: 19},
        {name: '超速', index: 20},
        {name: '到布', index: 21},
        {name: '分层', index: 23},
        {name: '编码器', index: 24}
      ],
      banTypes: [
        {name: 'A班', val: 0},
        {name: 'B班', val: 0},
        {name: 'C班', val: 0},
        {name: '总数', val: 0}
      ],
      cloths: [
        {name: '第一路纱长(百针纱长)', val: 0},
        {name: '第二路纱长(百针纱长)', val: 0},
        {name: '第三路纱长(百针纱长)', val: 0},
        {name: '第四路纱长(百针纱长)', val: 0},
      ],
      others: [
        {name: '织布模式', val: 0},
        {name: '织布设定值', val: 0},
        {name: '织布计数值', val: 0},
        {name: '清车设定值', val: 0},
        {name: '运行档位设定值', val: 0},
        {name: '调速锁定值', val: 0}
      ],
    }
  },

  methods: {


    /** 员工上班时间 */
    parseUpTime(item) {
      if (item) {
        let yyyy = _.parseInt(item.substring(48, 50), 16)
        let MM = _.padStart(_.parseInt(item.substring(50, 52), 16), 2, '0')
        let dd = _.padStart(_.parseInt(item.substring(52, 54), 16), 2, '0')
        let HH = _.padStart(_.parseInt(item.substring(54, 56), 16), 2, '0')
        let mm = _.padStart(_.parseInt(item.substring(56, 58), 16), 2, '0')
        let ss = _.padStart(_.parseInt(item.substring(58, 60), 16), 2, '0')
        return '20' + yyyy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
      } else {
        return ''
      }
    },

    /**
     * 每 8个一组 ，60组寄存器数据，存入tempAry
     */
    parseStatus(status) {
      let tempAry = []
      for (var i = 0; i < 60; i++) {
        tempAry.push(status.substr(i * 8, 8))
      }
      this.parseZero(tempAry[0])
      this.jishu(tempAry)
      this.clothLength(tempAry)
      //速度
      this.speed = _.parseInt(tempAry[7], 16) / 10
    },

    /** 解析第0寄存器 */
    parseZero(zero) {
      //第0寄存器状态数组  和数据库里的是反过来的
      let data = parseInt('0X' + zero).toString(2)
      let ary = new Array(32).fill(0)
      for (var i = 0; i < data.length; i++) {
        ary[i] = parseInt(data.charAt(data.length - 1 - i))
      }
      //现在得到的dataAry,索引从0-31 就是和寄存器协议表里的寄存器0的 bit0-bit31
      this.dataAry = ary
      console.log(this.dataAry)
    },
    /** 0寄存器故障颜色 */
    parseBackground(item) {
      let pic = ''
      if (item <= 8 || item === 20) {
        pic = this.dataAry[item] ? '#fd595a' : ''
      } else {
        pic = this.dataAry[item] ? '#3bce3f' : ''
      }
      return 'background:' + pic
    },

    /**
     * 班别、计数
     */
    jishu(item) {
      this.nowBan = _.parseInt(item[1].charAt(item[1].length - 1), 16)
      this.banTypes[0].val = _.parseInt(item[2], 16)
      this.banTypes[1].val = _.parseInt(item[3], 16)
      this.banTypes[2].val = _.parseInt(item[4], 16)
      // this.ban.D = _.parseInt(item[5], 16)
      this.banTypes[3].val = _.parseInt(item[6], 16)
    },
    isNow(index) {
      return index === this.nowBan ? '(当前)' : ''
    },

    /** 解析纱长*/
    clothLength(item) {
      let a = Big(_.parseInt(item[8], 16))
      let b = Big(_.parseInt(item[9], 16))
      let c = Big(_.parseInt(item[10], 16))
      let d = Big(_.parseInt(item[11], 16))
      Big.DP = 2;
      this.cloths[0].val = a.div(100).toFixed(2)
      this.cloths[1].val = b.div(100).toFixed(2)
      this.cloths[2].val = c.div(100).toFixed(2)
      this.cloths[3].val = d.div(100).toFixed(2)
    },

    /** 运行指示灯 */
    move(runOrStop, online) {
      let ele = this.ele
      if (online === 1) {
        this.runText = '离线'
        for (let i = 0; i < this.sizeIcon; i++) {
          ele[i].style.color = "#a9a9a9"
        }
      } else {
        if (_.parseInt(runOrStop, 16) & 4) {
          this.runText = '运行'
          this.createIcon = setInterval(() => {
            ele[this.greenIcon].style.color = "#78ce2d"

            let greyIcon = this.greenIcon === 0 ? this.sizeIcon - 1 : this.greenIcon - 1
            ele[greyIcon].style.color = "grey"

            this.greenIcon = this.greenIcon === 5 ? 0 : this.greenIcon + 1
          }, 250);
        } else {
          this.runText = '停止'
          for (let i = 0; i < this.sizeIcon; i++) {
            ele[i].style.color = "#d3271d"
          }
        }
      }
    }
  }
}
</script>

<style>
.initColor {
  font-size: 20px;
  color: grey
}

.bottomContext {
  width: 12.5%;
  padding: 8px 0;
  text-align: center;
  border-radius: 5px;
}

.my-label {
  width: 130px;
}

.cloth-label {
  width: 200px;
}
</style>
